{extend name="Public/base"/}

{block name="main"}

<style type="text/css">
#allmap {
    height: 500px;
    width: 100%;
    overflow: hidden;
}

.star {
    color: hsl(0, 100%, 50%);
}

</style>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header ">
                <span class="title active">电子地图(电子地图不显示吗？点击这里<a href="javascript:;" onClick="window.location.reload();" style="color:#f00; float:none;">刷新</a>)</span>
                <span class="star">* </span>为必填项
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-5">
                        <input id="cityName" class="form-control" type="text" placeholder="城市"/>
                    </div>
                    <div class="col-5">
                        <input id="cityAddress" class="form-control" type="text" placeholder="地区"/>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-primary" onClick="theLocation();">搜索</button>
                    </div>
                </div>

                <label class="helptips">请先根据您公司所在地区搜索大概位置，<font color="red">右击地图标记位置</font>，然后填写公司资料，最后生成地图。</label>
            </div>
            <div id="allmap" class="ym-gbox"></div>
        </div>
    </div>

    <div class="col-md-4">
        <form id="myForm" method="post">
            <input type="hidden" name="id" value="{$map['id']}">
            <input type="hidden" id="x" name="bdmap_x" value="{$map['config']['bdmap_x']}"/>
            <input type="hidden" id="y" name="bdmap_y" value="{$map['config']['bdmap_y']}"/>

            <div class="form-group">
                <label class="control-label"><span class="star">* </span>公司名称：</label>
                <input id="name" class="form-control" name="name" value="{$map['name']}" />
            </div>
            <div class="form-group">
                <label><span class="star">* </span>公司地址：</label>
                <input id="addr" class="form-control" name="address" value="{$map['address']}" />
            </div>
            <div class="form-group cui_btns">
                <label><span class="star">* </span>联系电话：</label>
                <input id="tel" class="form-control" name="tel" value="{$map['tel']}" />
            </div>
            <div class="form-group cui_btns">
                <label><span class="star">* </span>传真：</label>
                <input id="fax" class="form-control" name="fax" value="{$map['fax']}" />
            </div>
            <div class="form-group cui_btns">
                <label><span class="star">* </span>邮箱：</label>
                <input id="email" class="form-control" name="email" value="{$map['email']}" />
            </div>
            <div class="form-group cui_btns">
                <label><span class="star">* </span>邮编：</label>
                <input id="zipcode" class="form-control" name="zipcode" value="{$map['zipcode']}" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </form>
    </div>
</div>
{/block}

{block name="script"}

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=POcNPQVBF1nME1bSo0GIFZ0c"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('allmap');
var poi = new BMap.Point({empty name="map['config']['bdmap_x']"}113.918463{else/}{$map['config']['bdmap_x']}{/empty},{empty name="map['config']['bdmap_y']"}22.582876{else/}{$map['config']['bdmap_y']}{/empty});
map.centerAndZoom(poi, 18);

var content = ['地址：{$map['address']}电话：{$map['tel']}'].join('');

//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
        title  : "{$map['name']}",      //标题
        width  : 250,             //宽度
        height : 60,              //高度
        panel  : "panel",         //检索结果面板
        enableAutoPan : true,     //自动平移
        enableSendToPhone : true, //是否启动发送到手机功能
        searchTypes   :[
        ]
    });
    var marker = new BMap.Marker(poi); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    searchInfoWindow.open(marker);
    marker.addEventListener("click", function(e){
        searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker

    map.addEventListener("rightclick",function(e){   //鼠标点击时获取地理坐标。
    map.clearOverlays();   //在地图中清除marker
    $("#x").attr("value",e.point.lng);  //获取地理坐标。
    $("#y").attr("value",e.point.lat);

    var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  //在地图中添加新marker
    map.addOverlay(marker);
});


//鼠标滚轮缩放地图
map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

//根据城市名定位
function theLocation(){

    var city = $("#cityName").val();
    var address = $("#cityAddress").val();
    if(city != ""&&address!=""){
        map.centerAndZoom(city);      // 用城市名设置地图中心点
        var local = new BMap.LocalSearch(city, {
            renderOptions:{map: map}
        });
        local.search(address);//根据关键字本地搜索
    }
    return false;
}


$(document).ready(function() {
    $('#myForm').ajaxForm({
        success:  complete,  // post-submit callback
        dataType: 'json'
    });
});

function complete(data){
    if (data.status == 1) {
        layer.msg(data.info, {
            icon: 1,
            time: 2000 //2秒关闭（如果不配置，默认是3秒）
        }, function(){
            window.location.href = "{$Think.cookie.__forward__}";
            return true;
        });
    } else {
        layer.msg(data.info, {
            icon: 2,
            time: 2000 //2秒关闭（如果不配置，默认是3秒）
        });
    }
}
</script>

{/block}